<template>
    <div class="a-tree">
        <div class="a-tree-content">
            <template v-for="(a, i) in items" :key="getKeyFunc(a)">
                <template v-if="getIsFolderFunc(a)">
                    <slot
                        name="foldName"
                        :item="a"
                        :parent="parent"
                        :depth="depth"
                        :index="i"
                        :itemCount="items.length"
                        :opened="getIsItemOpenedFunc(a)"
                    ></slot>
                    <Transition>
                        <a-tree
                            :items="getItemsFunc(a)"
                            :getItemsFunc="getItemsFunc"
                            :parent="a"
                            :getKeyFunc="getKeyFunc"
                            :getIsFolderFunc="getIsFolderFunc"
                            :getIsItemOpenedFunc="getIsItemOpenedFunc"
                            :depth="depth + 1"
                            v-if="getIsItemOpenedFunc(a)"
                        >
                            <template v-slot:foldName="{ item, parent, depth, index, itemCount, opened }">
                                <slot
                                    name="foldName"
                                    :item="item"
                                    :parent="parent"
                                    :depth="depth"
                                    :index="index"
                                    :itemCount="itemCount"
                                    :opened="opened"
                                ></slot>
                            </template>
                            <template v-slot:file="{ item, parent, depth, index, itemCount }">
                                <slot
                                    name="file"
                                    :item="item"
                                    :parent="parent"
                                    :depth="depth"
                                    :index="index"
                                    :itemCount="itemCount"
                                ></slot>
                            </template>
                        </a-tree>
                    </Transition>
                </template>
                <template v-else>
                    <slot
                        name="file"
                        :item="a"
                        :parent="parent"
                        :depth="depth"
                        :index="i"
                        :itemCount="items.length"
                    ></slot>
                </template>
            </template>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.a-tree {
    &.v-enter-active,
    &.v-leave-active {
        transition: 300ms;
        overflow: hidden;
        display: grid;
        grid-template-rows: 1fr;
    }

    &.v-enter-from,
    &.v-leave-to {
        grid-template-rows: 0fr;
    }

    & > .a-tree-content {
        min-height: 0;
    }
}
</style>

<script>
export default {
    name: 'ATree',
    props: {
        items: {
            type: Array,
            default: [],
        },
        getItemsFunc: {
            type: Function,
            default: a => a.items,
        },
        parent: {
            type: Object,
            default: null,
        },
        getKeyFunc: {
            type: Function,
            default: a => a.id,
        },
        getIsFolderFunc: {
            type: Function,
            default: a => a.type == 0,
        },
        getIsItemOpenedFunc: {
            type: Function,
            default: a => a.on == true,
        },
        depth: {
            type: Number,
            default: 0,
        },
    },
}
</script>
